<template>
  <div
    class="content videoContent"
    :style="{ width: fullScreenRefWidth, height: fullScreenRefHeight }"
    ref="fullScreenRef"
    :class="{ fullScreenClass: fullScreenClass }"
  >
    <div class="fullBtn" @click="fullScreenBtn">
      全屏
    </div>
    <div class="exitFullBtn" @click="exitFullScreenBtn">
      退出全屏
    </div>
    <div class="oneB" v-show="oShow">
      <div
        class="oBox"
        :style="{ width: screenListForFull.o1.widthR, height: screenListForFull.o1.heightR }"
        :class="{ fullScreenClass: screenListForFull.o1.note }"
        @dblclick="dClick('o1')"
      >
        <div class="control o1c" ref="o1c" @dragover="allowDrop" @drop="dropV"></div>
        <div class="o o1" ref="o1"></div>
      </div>
    </div>
    <div class="twoB" v-show="tShow">
      <div
        class="tBox"
        :style="{ width: screenListForFull.t1.widthR, height: screenListForFull.t1.heightR }"
        :class="{ fullScreenClass: screenListForFull.t1.note }"
        @dblclick="dClick('t1')"
      >
        <div class="control t1c" ref="t1c" @dragover="allowDrop" @drop="dropV"></div>
        <div class="t t1" ref="t1"></div>
      </div>
      <div
        class="tBox"
        :style="{ width: screenListForFull.t2.widthR, height: screenListForFull.t2.heightR }"
        :class="{ fullScreenClass: screenListForFull.t2.note }"
        @dblclick="dClick('t2')"
      >
        <div class="control t2c" ref="t2c" @dragover="allowDrop" @drop="dropV"></div>
        <div class="t t2" ref="t2"></div>
      </div>
      <div
        class="tBox"
        :style="{ width: screenListForFull.t3.widthR, height: screenListForFull.t3.heightR }"
        :class="{ fullScreenClass: screenListForFull.t3.note }"
        @dblclick="dClick('t3')"
      >
        <div class="control t3c" ref="t3c" @dragover="allowDrop" @drop="dropV"></div>
        <div class="t t3" ref="t3"></div>
      </div>
      <div
        class="tBox"
        :style="{ width: screenListForFull.t4.widthR, height: screenListForFull.t4.heightR }"
        :class="{ fullScreenClass: screenListForFull.t4.note }"
        @dblclick="dClick('t4')"
      >
        <div class="control t4c" ref="t4c" @dragover="allowDrop" @drop="dropV"></div>
        <div class="t t4" ref="t4"></div>
      </div>
    </div>
    <div class="threeB" v-show="hShow">
      <div
        class="hBox"
        :style="{ width: screenListForFull.h10.widthR, height: screenListForFull.h10.heightR }"
        :class="{ fullScreenClass: screenListForFull.h10.note }"
        @dblclick="dClick('h10')"
      >
        <div class="control h10c" ref="h10c" @dragover="allowDrop" @drop="dropV"></div>
        <div class="h h10" ref="h10"></div>
      </div>
      <div
        class="hBox"
        :style="{ width: screenListForFull.h2.widthR, height: screenListForFull.h2.heightR }"
        :class="{ fullScreenClass: screenListForFull.h2.note }"
        @dblclick="dClick('h2')"
      >
        <div class="control h2c" ref="h2c" @dragover="allowDrop" @drop="dropV"></div>
        <div class="h h2" ref="h2"></div>
      </div>
      <div
        class="hBox"
        :style="{ width: screenListForFull.h3.widthR, height: screenListForFull.h3.heightR }"
        :class="{ fullScreenClass: screenListForFull.h3.note }"
        @dblclick="dClick('h3')"
      >
        <div class="control h10c" ref="h3c" @dragover="allowDrop" @drop="dropV"></div>
        <div class="h h3" ref="h3"></div>
      </div>
      <div
        class="hBox"
        :style="{ width: screenListForFull.h4.widthR, height: screenListForFull.h4.heightR }"
        :class="{ fullScreenClass: screenListForFull.h4.note }"
        @dblclick="dClick('h4')"
      >
        <div class="control h4c" ref="h4c" @dragover="allowDrop" @drop="dropV"></div>
        <div class="h h4" ref="h4"></div>
      </div>
      <div
        class="hBox"
        :style="{ width: screenListForFull.h5.widthR, height: screenListForFull.h5.heightR }"
        :class="{ fullScreenClass: screenListForFull.h5.note }"
        @dblclick="dClick('h5')"
      >
        <div class="control h5c" ref="h5c" @dragover="allowDrop" @drop="dropV"></div>
        <div class="h h5" ref="h5"></div>
      </div>
      <div
        class="hBox"
        :style="{ width: screenListForFull.h6.widthR, height: screenListForFull.h6.heightR }"
        :class="{ fullScreenClass: screenListForFull.h6.note }"
        @dblclick="dClick('h6')"
      >
        <div class="control h6c" ref="h6c" @dragover="allowDrop" @drop="dropV"></div>
        <div class="h h6" ref="h6"></div>
      </div>
      <div
        class="hBox"
        :style="{ width: screenListForFull.h7.widthR, height: screenListForFull.h7.heightR }"
        :class="{ fullScreenClass: screenListForFull.h7.note }"
        @dblclick="dClick('h7')"
      >
        <div class="control h7c" ref="h7c" @dragover="allowDrop" @drop="dropV"></div>
        <div class="h h7" ref="h7"></div>
      </div>
      <div
        class="hBox"
        :style="{ width: screenListForFull.h8.widthR, height: screenListForFull.h8.heightR }"
        :class="{ fullScreenClass: screenListForFull.h8.note }"
        @dblclick="dClick('h8')"
      >
        <div class="control h8c" ref="h8c" @dragover="allowDrop" @drop="dropV"></div>
        <div class="h h8" ref="h8"></div>
      </div>
      <div
        class="hBox"
        :style="{ width: screenListForFull.h9.widthR, height: screenListForFull.h9.heightR }"
        :class="{ fullScreenClass: screenListForFull.h9.note }"
        @dblclick="dClick('h9')"
      >
        <div class="control 9c" ref="h9c" @dragover="allowDrop" @drop="dropV"></div>
        <div class="h h9" ref="h9"></div>
      </div>
    </div>
  </div>
</template>
<script>
let playerList = {}
let player = null
export default {
  data () {
    return {
      screenList: ['o1', 't1', 't2', 't3', 't4', 'h10', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7', 'h8', 'h9'],
      screenListForFull: {
        o1: {
          note: false, // 单个双击全屏退出标记
          widthR: '100%', // 单个实际宽度
          heightR: '100%', // 单个实际高度
          width: '100%', // 单个默认宽度
          height: '100%' // 单个默认高度
        },
        t1: {
          note: false, // 单个双击全屏退出标记
          widthR: '50%', // 单个实际宽度
          heightR: '50%', // 单个实际高度
          width: '50%', // 单个默认宽度
          height: '50%' // 单个默认高度
        },
        t2: {
          note: false, // 单个双击全屏退出标记
          widthR: '50%', // 单个实际宽度
          heightR: '50%', // 单个实际高度
          width: '50%', // 单个默认宽度
          height: '50%' // 单个默认高度
        },
        t3: {
          note: false, // 单个双击全屏退出标记
          widthR: '50%', // 单个实际宽度
          heightR: '50%', // 单个实际高度
          width: '50%', // 单个默认宽度
          height: '50%' // 单个默认高度
        },
        t4: {
          note: false, // 单个双击全屏退出标记
          widthR: '50%', // 单个实际宽度
          heightR: '50%', // 单个实际高度
          width: '50%', // 单个默认宽度
          height: '50%' // 单个默认高度
        },
        h10: {
          note: false, // 单个双击全屏退出标记
          widthR: '33.33%', // 单个实际宽度
          heightR: '33.33%', // 单个实际高度
          width: '33.33%', // 单个默认宽度
          height: '33.33%' // 单个默认高度
        },
        h2: {
          note: false, // 单个双击全屏退出标记
          widthR: '33.33%', // 单个实际宽度
          heightR: '33.33%', // 单个实际高度
          width: '33.33%', // 单个默认宽度
          height: '33.33%' // 单个默认高度
        },
        h3: {
          note: false, // 单个双击全屏退出标记
          widthR: '33.33%', // 单个实际宽度
          heightR: '33.33%', // 单个实际高度
          width: '33.33%', // 单个默认宽度
          height: '33.33%' // 单个默认高度
        },
        h4: {
          note: false, // 单个双击全屏退出标记
          widthR: '33.33%', // 单个实际宽度
          heightR: '33.33%', // 单个实际高度
          width: '33.33%', // 单个默认宽度
          height: '33.33%' // 单个默认高度
        },
        h5: {
          note: false, // 单个双击全屏退出标记
          widthR: '33.33%', // 单个实际宽度
          heightR: '33.33%', // 单个实际高度
          width: '33.33%', // 单个默认宽度
          height: '33.33%' // 单个默认高度
        },
        h6: {
          note: false, // 单个双击全屏退出标记
          widthR: '33.33%', // 单个实际宽度
          heightR: '33.33%', // 单个实际高度
          width: '33.33%', // 单个默认宽度
          height: '33.33%' // 单个默认高度
        },
        h7: {
          note: false, // 单个双击全屏退出标记
          widthR: '33.33%', // 单个实际宽度
          heightR: '33.33%', // 单个实际高度
          width: '33.33%', // 单个默认宽度
          height: '33.33%' // 单个默认高度
        },
        h8: {
          note: false, // 单个双击全屏退出标记
          widthR: '33.33%', // 单个实际宽度
          heightR: '33.33%', // 单个实际高度
          width: '33.33%', // 单个默认宽度
          height: '33.33%' // 单个默认高度
        },
        h9: {
          note: false, // 单个双击全屏退出标记
          widthR: '33.33%', // 单个实际宽度
          heightR: '33.33%', // 单个实际高度
          width: '33.33%', // 单个默认宽度
          height: '33.33%' // 单个默认高度
        }
      },
      fullScreenClass: false, // 多屏幕全屏记号
      lastScreenType: 'twoBSelected', // 上一次屏幕展示方式

      nodeClickId: '', // 播放列表单击时记录单击id
      nodeClickState: false, // 播放列表单击状态
      oneFullShow: false, // 单个全屏

      oneFullScreenRefNote: false, // 单个双击全屏退出标记
      oneFullScreenRefWidth: '19.20rem', // 单个宽度
      oneFullScreenRefHeight: '10.80rem', // 单个高度
      oneFullScreenClass: false // 是否单个样式
    }
  },
  mounted () {},
  props: {
    fullScreenRefWidth: {
      type: String,
      default: '100%' // 多屏幕全屏还原用宽度
    },
    // 多屏幕全屏还原用高度
    fullScreenRefHeight: {
      type: String,
      default: '100%'
    },

    // 多屏幕分屏模式
    screenType: {
      type: String,
      default: '1'
    }
  },
  components: {},
  computed: {
    oShow () {
      // 视频在实现线上的分布
      if (this.screenType === '1') {
        return true
      } else {
        return false
      }
    },
    tShow () {
      // 视频在实现线上的分布
      if (this.screenType === '4') {
        return true
      } else {
        return false
      }
    },
    hShow () {
      // 视频在实现线上的分布
      if (this.screenType === '9') {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    elDragStart (node, event) {
      this.draggingNote = true
      this.startNode = node
      console.log(node, event, 'start')
    },
    dropV (e) {
      e.preventDefault()
      console.log(e, 'end', this.draggingNote)
      let _this = this
      if (this.draggingNote === true) {
        this.draggingNote = false
        _this.screenList.forEach(v => {
          if (e.target === this.$refs[v + 'c']) {
            this.playF(this.startNode.data.ch, v)
          }
          /* if (e.target.nodeName === 'OBJECT') {
            if (e.target.parentNode&&e.target.parentNode.parentNode === this.$refs[v]) {
              this.playF(this.startNode.data.ch, v)
            }
          } */
        })
        /* if (e.target === this.$refs.t1) {
           this.playF(this.startNode.data.ch, 't1')
         }
         if (e.target.nodeName === 'OBJECT') {
           if (e.target.parentNode.parentNode === this.$refs.t1) {
             this.playF(this.startNode.data.ch, 't1')
           }
         } */
      }
    },
    allowDrop (e) {
      e.preventDefault()
    },
    elAllowDrag (draggingNode) {
      console.log('draggingNode', draggingNode)
      let b
      if (draggingNode.level === 1) {
        b = false
      } else {
        b = true
      }
      return b
    },
    // 防止标签顺序被拽乱
    elAllowDrop (draggingNode, dropNode) {
      // console.log(draggingNode, dropNode, type)
      let b
      if (dropNode.level === 1 || dropNode.level === 2) {
        b = false
      } else {
        b = true
      }
      return b
    },
    elHandleDragEnd (draggingNode, dropNode, dropType, ev) {
      let _this = this
      setTimeout(() => {
        _this.draggingNote = false
      }, 300)
      console.log('tree drag end: ', dropNode && dropNode.label, dropType, ev)
    },
    selectS (i) {
      let _this = this
      if (i === 1) {
        if (_this.lastScreenType === 'twoBSelected') {
          return
        } else {
          _this.screenList.forEach(v => {
            console.log(v)

            if (playerList[v]) {
              console.log(playerList[v])
              playerList[v].dispose()
              playerList[v] = null
            }
          })
        }
        _this.twoBSelected = true
        _this.threeBSelected = false
        _this.nBSelected = false
        _this.tShow = true
        _this.hShow = false
        _this.nShow = false
        _this.lastScreenType = 'twoBSelected'
      } else if (i === 2) {
        if (_this.lastScreenType === 'threeBSelected') {
          return
        } else {
          _this.screenList.forEach(v => {
            console.log(v)
            if (playerList[v]) {
              playerList[v].dispose()
              playerList[v] = null
            }
          })
        }
        _this.twoBSelected = false
        _this.threeBSelected = true
        _this.nBSelected = false
        _this.tShow = false
        _this.hShow = true
        _this.nShow = false
        _this.lastScreenType = 'threeBSelected'
      } else if (i === 3) {
        if (_this.lastScreenType === 'nBSelected') {
          return
        } else {
          _this.screenList.forEach(v => {
            if (playerList[v]) {
              playerList[v].dispose()
              playerList[v] = null
            }
          })
        }
        _this.twoBSelected = false
        _this.threeBSelected = false
        _this.nBSelected = true
        _this.tShow = false
        _this.hShow = false
        _this.nShow = true
        _this.lastScreenType = 'nBSelected'
      }
    },
    stopScreensPlay () {
      this.screenList.forEach(v => {
        if (playerList[v]) {
          playerList[v].dispose()
          playerList[v] = null
        }
      })
      if (player) {
        player.dispose()
        player = null
      }
    },
    playF (url, tar) {
      let _this = this
      if (playerList[tar]) {
        console.log('restart')
        playerList[tar].dispose()
      }
      // this.$refs[tar].innerHTML = ''
      this.$refs[tar].innerHTML =
        '<video id="' +
        tar +
        'zjx' +
        '" class="video-js vjs-default-skin vjs-big-play-centered" style="width: 100%; height: 100%;" controls preload="none"\n' +
        '               poster="" x5-video-player-fullscreen=”true” x5-video-player-type=”h5”>\n' +
        // '          <source src="rtmp://58.200.131.2:1935/livetv/hunantv" type="rtmp/mp4"></source>\n' +
        // '          <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks1" type="rtmp/mp4"></source>\n' +
        // '          <source src="rtmp://202.69.69.180:443/webcast/bshdlive-pc" type="rtmp/mp4"></source>\n' +
        '          <source src="' +
        url +
        '" type="rtmp/mp4"></source>\n' +
        // '          <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks" type="rtmp/mp4"></source>\n' +
        // '          <p class="vjs-no-js">\n' +
        // '            To view this video please enable JavaScript, and consider upgrading to a web browser that\n' +
        // '            <a href="http://videojs.com/html5-video-support/" target="_blank">\n' +
        // '              supports HTML5 video\n' +
        // '            </a>\n' +
        // '          </p>\n' +
        '        </video>'
      /* global videojs */
      playerList[tar] = videojs(tar + 'zjx', {
        notSupportedMessage: '您的浏览器没有安装或开启Flash,戳我开启！',
        techOrder: ['flash'],
        autoplay: true
      })

      // 指引装插件
      playerList[tar].on('error', function () {
        _this.$refs[tar + 'c'].innerHTML =
          "<div style=\"padding-top: 50px;color:#ffffff;\"><a href='http://www.adobe.com/go/getflashplayer' target='_blank' style='color:#ffffff;'>点我开启flash，开启后请刷新页面</a></div>"
      })
    },
    fullScreenBtn () {
      // console.log(window.remWindowWith)
      this.fullScreenRefWidthTemp = this.fullScreenRefWidth
      this.fullScreenRefHeightTemp = this.fullScreenRefHeight
      // this.fullScreenRefWidth = window.remWindowWith / 100 + 'rem'
      // this.fullScreenRefHeight = window.remWindowWith / 16 * 9 / 100 + 'rem'
      this.fullScreenClass = true
      this.$nextTick(function () {
        this.$emit('multipleFullScreen')
      })
    },
    exitFullScreenBtn () {
      this.fullScreenRefWidth = '100%'
      this.fullScreenRefHeight = '100%'
      this.fullScreenClass = false
      this.$nextTick(function () {
        this.$emit('multipleExitFullScreen')
      })
    },
    dClick (dom) {
      this.screenListForFull[dom].note = !this.screenListForFull[dom].note
      console.log('dc', this.screenListForFull[dom].note)
      if (this.screenListForFull[dom].note === true) {
        // console.log(window.remWindowWith / 100 + 'rem', window.remWindowWith / 16 * 9 / 100 + 'rem')
        // this.screenListForFull[dom].widthR = window.remWindowWith / 100 + 'rem'
        // this.screenListForFull[dom].heightR = window.remWindowWith / 16 * 9 / 100 + 'rem'
        this.screenListForFull[dom].widthR = this.fullScreenRefWidth
        this.screenListForFull[dom].heightR = this.fullScreenRefHeight
        // this['fullScreenClass'+dom] = true
        this.$emit('singleFullScreen', dom)
      } else {
        this.screenListForFull[dom].widthR = this.screenListForFull[dom].width
        this.screenListForFull[dom].heightR = this.screenListForFull[dom].height
        // this['fullScreenClass'+dom] = false
        this.$emit('singleExitFullScreen', dom)
      }
    },
    elNodeClick (node) {
      this.nodeClickState = true
      setTimeout(() => {
        this.nodeClickState = false
      }, 400)
      if (this.nodeClickState === true && node.id === this.nodeClickId) {
        this.doubleElNodeClick(node.ch)
      }
      this.nodeClickId = node.id
    },
    doubleElNodeClick (url) {
      this.oneFullShow = true
      this.oneFullScreenRefWidth = window.remWindowWith / 100 + 'rem'
      this.oneFullScreenRefHeight = ((window.remWindowWith / 16) * 9) / 100 + 'rem'
      this.oneFullScreenClass = true
      // console.log(url)
      let _this = this
      if (player) {
        console.log('restart')
        player.dispose()
      }
      // this.$refs[tar].innerHTML = ''
      this.$refs.oneFull.innerHTML =
        '<video id="oneFull" class="video-js vjs-default-skin vjs-big-play-centered" style="width: 100%; height: 100%;" controls preload="none"\n' +
        '               poster="" x5-video-player-fullscreen=”true” x5-video-player-type=”h5”>\n' +
        // '          <source src="rtmp://58.200.131.2:1935/livetv/hunantv" type="rtmp/mp4"></source>\n' +
        // '          <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks1" type="rtmp/mp4"></source>\n' +
        // '          <source src="rtmp://202.69.69.180:443/webcast/bshdlive-pc" type="rtmp/mp4"></source>\n' +
        '          <source src="' +
        url +
        '" type="rtmp/mp4"></source>\n' +
        // '          <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks" type="rtmp/mp4"></source>\n' +
        // '          <p class="vjs-no-js">\n' +
        // '            To view this video please enable JavaScript, and consider upgrading to a web browser that\n' +
        // '            <a href="http://videojs.com/html5-video-support/" target="_blank">\n' +
        // '              supports HTML5 video\n' +
        // '            </a>\n' +
        // '          </p>\n' +
        '        </video>'
      /* global videojs */
      player = videojs('oneFull', {
        notSupportedMessage: '您的浏览器没有安装或开启Flash,戳我开启！',
        techOrder: ['flash'],
        autoplay: true
        // poster:'./assets/images/village/noVideo@2x.png', //播放器 默认图片
      })

      // 指引装插件
      player.on('error', function () {
        _this.$refs.oneFull.innerHTML =
          "<div style=\"padding-top: 50px;color:#ffffff;\"><a href='http://www.adobe.com/go/getflashplayer' target='_blank' style='color:#ffffff;'>点我开启flash，开启后请刷新页面</a></div>"
      })
    },
    closeOneFull () {
      player.dispose()
      player = null
      this.oneFullShow = false
    }
  },
  beforeDestroy () {
    this.stopScreensPlay()
  }
}
</script>
<style lang="scss">
.videoContent {
  height: 100%;
  width: 100%;
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  background: none;
  position: relative;

  .fullBtn {
    width: 40px;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 1);
    position: absolute;
    bottom: 40px;
    right: 40px;
    font-size: 14px;
    color: #ffffff;
    line-height: 20px;
    text-align: center;
    z-index: 5;
  }

  .exitFullBtn {
    width: 80px;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 1);
    position: absolute;
    bottom: 40px;
    right: 100px;
    font-size: 14px;
    color: #ffffff;
    line-height: 20px;
    text-align: center;
    z-index: 5;
  }

  .oneB {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;

    .oBox {
      overflow: hidden;
      width: 50%;
      height: 50%;
      background: url('images/noVideo@2x.png') no-repeat 50% 50%;
      background-size: 20% auto;
      position: relative;
    }

    .oBox:nth-of-type(1),
    .oBox:nth-of-type(4) {
      background-color: #3c495f;
    }

    .oBox:nth-of-type(2),
    .oBox:nth-of-type(3) {
      background-color: #34445f;
    }

    .o {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .control {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 2;
      background-color: transparent;
    }
  }

  .twoB {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;

    .tBox {
      overflow: hidden;
      width: 50%;
      height: 50%;
      background: url('images/noVideo@2x.png') no-repeat 50% 50%;
      background-size: 20% auto;
      position: relative;
    }

    .tBox:nth-of-type(1),
    .tBox:nth-of-type(4) {
      background-color: #3c495f;
    }

    .tBox:nth-of-type(2),
    .tBox:nth-of-type(3) {
      background-color: #34445f;
    }

    .t {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .control {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 2;
      background-color: transparent;
    }
  }

  .threeB {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;

    .hBox {
      overflow: hidden;
      width: 33.33%;
      height: 33.33%;
      background: url('images/noVideo@2x.png') no-repeat 50% 50%;
      background-size: 30% 30%;
      position: relative;
    }

    .hBox:nth-of-type(2n + 1) {
      background-color: #3c495f;
    }

    .hBox:nth-of-type(2n) {
      background-color: #34445f;
    }

    .h {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .control {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 2;
      background-color: transparent;
    }
  }
}

.fullScreenClass {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 999 !important;
  background-color: rgba(43, 54, 72, 1) !important;
}
</style>
